<div class="layui-body">
  <div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <div class="layui-row content-body place-holder">
      <!-- 表单上面的按钮 -->
      <div class="lay-col-lg12">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <!-- 顶部搜索 -->
            <div class="layui-inline">
              <div class="layui-input-inline">
                <input type="text" name="keyword" id="keyword" placeholder="请输入要搜索的标题" autocomplete="off" class="layui-input">
              </div>
              <div class="layui-input-inline" style="width: 100px;">
                <button class="layui-btn" lay-submit lay-filter="search_keyword">搜索</button>
              </div>
            </div>
            <!-- 顶部搜索END -->

          </div>
        </form>
      </div>
      <!-- 表单上面的按钮END -->
      <div class="layui-col-lg12">
        <table id="link_list" lay-filter="mylink" lay-data="{id: 'mylink_reload'}"></table>
        <!-- 开启表格头部工具栏 -->
        <script type="text/html" id="linktool">
          <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="getCheckData">删除选中</button>
            <button class="layui-btn layui-btn-sm" lay-event="readmoredata">批量修改分类</button>
            <button class="layui-btn layui-btn-sm" lay-event="set_private">设为私有</button>
            <button class="layui-btn layui-btn-sm" lay-event="set_public">设为公有</button>
            <button class="layui-btn layui-btn-sm" lay-event="reset_query">重置查询</button>
            <!-- <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button> -->
          </div>
        </script>
        <!-- 开启表格头部工具栏END -->
      </div>
      <table class="layui-hide" id="ID-table-demo-data"></table>
      <script>
        layui.use('table', function() {
          var table = layui.table;
          var laypage = layui.laypage;
          //数据渲染
          var inst = table.render({

            elem: '#ID-table-demo-data',
            cols: [
              [ //标题栏
                {
                  field: 'tid',
                  title: 'ID'
                },
                {
                  field: 'textname',
                  title: '主标题'
                },
                {
                  field: 'creator',
                  title: '创建者'
                },
                {
                  field: 'gread',
                  title: '同组读权限'
                },
                {
                  field: 'otherread',
                  title: '同组写权限'
                },
                {
                  field: 'gwrite',
                  title: '其他读权限'
                },
                {
                  field: 'otherwrite',
                  title: '其他写权限'
                },
                {
                  fixed: 'right',
                  title: '操作',
                  width: 134,
                  minWidth: 125,
                  toolbar: '#barDemo'
                }
              ]
            ],
            url: '/bishe/db/searchAllUser.php',
            method: 'post',
            parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
              console.log("成功" + res.code + ";==" + res.msg + ";" + res.count);
              return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.count, //解析数据长度
                "data": res.data //解析数据列表
              };
            },
            page: true,
            limit: 5,
            limits: [5, 10, 20, 30],
          });
        });
        form.on('submit(search_keyword)', function(data) {
          let name = data.field.keyword; // 获得表单字段
          // 执行搜索重载
          table.render({
            elem: '#ID-table-demo-data',
            cols: [
              [ //标题栏
                {
                  field: 'tid',
                  title: 'ID'
                },
                {
                  field: 'textname',
                  title: '主标题'
                },
                {
                  field: 'creator',
                  title: '创建者'
                },
                {
                  field: 'gread',
                  title: '同组读权限'
                },
                {
                  field: 'otherread',
                  title: '同组写权限'
                },
                {
                  field: 'gwrite',
                  title: '其他读权限'
                },
                {
                  field: 'otherwrite',
                  title: '其他写权限'
                },
                {
                  fixed: 'right',
                  title: '操作',
                  width: 134,
                  minWidth: 125,
                  toolbar: '#barDemo'
                }
              ]
            ],
            url: '/bishe/db/searchUsername.php',
            where: {
              name: name
            },
            method: 'post',
            parseData: function(res) { //将原始数据解析成 table 组件所规定的数据
              console.log("成功" + res.code + ";==" + res.msg + ";" + res.count);
              return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.count, //解析数据长度
                "data": res.data //解析数据列表
              };
            },
            page: true,
            limit: 5,
            limits: [5, 10, 20, 30],
          })
          layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
          return false; // 阻止默认 form 跳转
        });
      </script>
    </div>